/**
 * 组件：WinPanelRow 组件
 * Author:Colin3dmax
 */
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native';
import Util from '../utils/util';

class WinPanelRow extends Component {

    static propTypes = {
        subComp:PropTypes.node,
        title: PropTypes.string,
        subTitle: PropTypes.string,
        showSplit: PropTypes.bool,
        iconSource: Image.propTypes.source,
        style: View.propTypes.style,
        titleTextStyle: View.propTypes.style,
        titleIconStyle: Image.propTypes.style,
        titleBarStyle: View.propTypes.style,
        subTitleTextStyle:View.propTypes.style,
        bodyStyle: View.propTypes.style,
        onPressTitleBar: PropTypes.func,
    }

    static defaultProps = {
        showSplit: true,
    }

    constructor(props) {
        super(props)
        this.state = {}
    }

    componentDidMount() {

    }

    genSubCompUI(){
        const {subComp} = this.props
        if(subComp){
            return subComp;
        }
    }

    render() {
        const {title, subTitle, showSplit, iconSource, style, bodyStyle, titleBarStyle, titleTextStyle, subTitleTextStyle, titleIconStyle, onPressTitleBar, children} = this.props
        return (
            <View style={[styles.winPanelRow,style]}>
                <TouchableOpacity onPress={onPressTitleBar}>
                    <View style={[styles.winPanelTitle, titleBarStyle]}>
                        {iconSource && <Image source={iconSource} style={[styles.titleBarIcon, titleIconStyle]}/>}
                        <Text style={[styles.winPanelTitleText, titleTextStyle]}>{title}</Text>
                        <Text style={[styles.winPanelSubTitleText, subTitleTextStyle]}>{subTitle}</Text>
                        {this.genSubCompUI()}
                    </View>
                </TouchableOpacity>
                {showSplit && <View style={styles.splitLine}/>}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    winPanelRow: {
        marginTop: 8,
        backgroundColor: 'white',
    },
    winPanelTitle: {
        height: 40,
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 8,
        paddingRight: 8,
    },
    titleBarIcon: {
        marginRight: 4,
        width: 22,
        height: 22,
        resizeMode: 'contain',
    },
    winPanelTitleText: {
        fontSize: 14,
        color: '#393939',
        width:120,
    },
    winPanelSubTitleText: {
        fontSize: 14,
        color: '#707070',
    },
    splitLine: {
        height: Util.getRealPixel(1),
        backgroundColor: '#EDEDEF',
        // marginLeft:8,
    },
    winPanelBody: {},

});

export default WinPanelRow;